<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="./validation/dist/jquery.validate.min.js"></script>
    <title>户籍管理系统</title>
    <style>
        body {
            background: skyblue;
        }

        .container {
            /* width: 500px; */
            width: 30rem;
            margin: auto;
            position: relative;
            margin-top: 5.333333rem;
        }

        h5 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h5>户籍管理系统</h5>
        <form>
            <div class="form-item mt-3">
                <label class="form-label" for="name">账号：</label>
                <input type="text" id="name" name="name" class="form-control" placeholder="手机号/身份证号">
                <div class="invalid-feedback">
                    用户名已存在,请重新输入！
                </div>
            </div>
            <div class="form-item mt-3">
                <label for="password" class="form-label">密码：</label>
                <input type="text" id="password" name="password" class="form-control" placeholder="密码">
            </div>
            <div class="mt-4 d-grid">
                <button class="btn btn-primary btn">注册</button>
            </div>
            <div class="mt-3">
                <h6>已有账号，去<a href="login.html">登录</a></h6>
            </div>
        </form>
    </div>


    <script>
        const name = document.querySelector('#name');
        const password = document.querySelector('#password');
        const btn = document.querySelector('.btn')
  

        const xhr = new XMLHttpRequest()
        xhr.onload = function () {
            const data = JSON.parse(xhr.responseText)
            console.log('data', data)
            if (data.code === 200) {
                name.classList.remove('is-invalid')
                // name.classList.add('is-valid')

            } else {
                name.classList.add('is-invalid')
            }
        }

        name.onchange = function () {
            xhr.open('get',
                'http://localhost:2021/api/reg/check?name=' + name.value, true);
            xhr.send();
        }

        const xhr2 = new XMLHttpRequest()
        xhr2.onload = function () {
            const data = JSON.parse(xhr2.responseText);
            if (data.code === 200) {
                location.href = 'login.html'
            }
        }

        function aa() {
            btn.onclick = function (ev) {
                xhr2.open('post', 'http://localhost:2021/api/reg',
                    true);
               
                // //设置Content-Type请求头
                // xhr2.setRequestHeader('Content-Type',
                //     'application/x-www-form-urlencoded')
                // xhr2.send(`name=${name.value}&password=
                // ${password.value}`)

                //设置json请求头
                xhr2.setRequestHeader('Content-Type',
                    'application/json')

                xhr2.send(JSON.stringify({
                    name: name.value,
                    password: password.value
                }))

                ev.preventDefault()
            }

          
        }



        $('form').validate({
            //选项规则
            rules: {
                name: {
                    required: true,
                    rangelength: [6, 18],
                },
                password: {
                    required: true,
                    rangelength: [6, 18],
                },
            },
            //提示文字
            messages: {
                name: {
                    required: '用户名是必填项',
                    rangelength: '用户名非法'
                },
                password: {
                    required: '密码是必填项',
                    rangelength: '密码长度只能为6-18位'
                },
            },

            //验证成功时执行的函数
            submitHandler: function (form) {
                //可以把表单发送去后端验证
                // console.log('666')
                aa();
              
            },
        })


    </script>

</body>

</html>